<template>
  <div class="container">
    <Breadcrumb />
    <a-card class="data-card">
      <a-row>
        <a-col :flex="1">
          <a-form
            :model="formModel"
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
          >
            <a-row :gutter="20">
              <a-col :span="5">
                <a-form-item field="userName" label="用户名">
                  <a-input
                    v-model="formModel.userName"
                    placeholder="请输入用户名"
                    allow-clear
                  />
                </a-form-item>
              </a-col>
              <a-col :span="5">
                <a-form-item field="username" label="时间">
                  <a-range-picker @change="onChangeTime" />
                </a-form-item>
              </a-col>
              <a-col :span="5">
                <a-space :size="18">
                  <a-button type="primary" @click="onPageChange(1)">
                    <template #icon>
                      <icon-search />
                    </template>
                    搜索
                  </a-button>
                  <a-button @click="reset">
                    <template #icon>
                      <icon-refresh />
                    </template>
                    重置
                  </a-button>
                  <!-- <a-button type="primary" @click="openOper">
										操作日志
									</a-button> -->
                </a-space>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
      <a-divider style="margin-top: 0" />
      <a-table
        row-key="userId"
        :loading="loading"
        page-position="bottom"
        :pagination="pagination"
        :columns="columns"
        :data="renderData"
        :bordered="false"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
      </a-table>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
  import { computed, ref, reactive, watch, nextTick } from 'vue';
  import { useRouter } from 'vue-router';
  import useLoading from '@/hooks/loading';
  import { loginLogs } from '@/api/logs.ts';

  const { loading, setLoading } = useLoading(true);

  const generateFormModel = () => {
    return {
      userName: '',
      startDate: '',
      endDate: '',
    };
  };

  const formModel = ref(generateFormModel());
  const renderData = ref([]);

  const onChangeTime = (startEnd, startEndOri) => {
    if (startEnd && startEnd.length == 2) {
      formModel.value.startDate = startEnd[0];
      formModel.value.endDate = startEnd[1];
    } else {
      formModel.value.startDate = '';
      formModel.value.endDate = '';
    }
  };

  const basePagination: Pagination = {
    current: 1,
    pageSize: 15,
    total: 0,
  };
  const pagination = reactive({
    ...basePagination,
    'hide-on-single-page': true,
    'show-total': true,
    'show-jumper': true,
    'show-page-size': true,
  });
  const columns = computed<TableColumnData[]>(() => [
    {
      title: '用户名',
      dataIndex: 'username',
    },
    {
      title: 'IP地址',
      dataIndex: 'ipAddress',
    },
    {
      title: '操作时间',
      dataIndex: 'loginTime',
    },
    {
      title: '操作描述',
      dataIndex: 'remark',
    },
  ]);

  const fetchData = async () => {
    setLoading(true);
    try {
      const data = {
        pageNum: pagination.current,
        ...pagination,
        ...formModel.value,
      };
      loginLogs(data).then((res) => {
        renderData.value = res.data.list;
        pagination.total = res.data.total;
        pagination.current = res.data.current;
      });
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };

  const onPageChange = (current: number) => {
    pagination.current = current;
    fetchData();
  };
  const onPageSizeChange = (pageSize: number) => {
    pagination.pageSize = pageSize;
    fetchData();
  };

  const reset = () => {
    formModel.value = generateFormModel();
    fetchData();
  };
  fetchData();

  const router = useRouter();
  const openOper = () => {
    router.push({
      name: 'operlogs',
    });
  };
</script>
